<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 下拉菜单 -->
    <Dropmenu
      :filterCategory="filterCategory"
      @transfer="changePriceFn"
      @transfer1="changeKindFn"
    ></Dropmenu>
    <GoodsList :goodsList="goodsList"></GoodsList>
  </div>
</template>

<script>
import Dropmenu from "../components/Dropmenu.vue";
//商品列表
import GoodsList from "@/components/GoodsList.vue";
//引入商品搜索接口
import { GetSearchData } from "@/utils/http";
export default {
  name: "",
  props: [""],
  data() {
    return {
      // value:'',
      keyword: "", //搜索关键词
      page: 1, //默认页数
      size: 10, //条数
      order: "desc", //高到底
      categoryId: 0, //产品类别ID
      sort: "id", //排序方式
      goodsList: [],
      filterCategory: [], 
    };
  },

  components: {
    Dropmenu,
    GoodsList,
  },

  computed: {},

  created() {
    this.getData();
  },

  mounted() {},

  methods: {
    getData() {
      let params = {
        keyword: this.keyword,
        page: this.page, //默认页数
        size: this.size, //条数
        order: this.order, //产品类别ID
        sort: this.sort, //排序方式
        categoryId: this.categoryId,
        // filterCategory: [], //下拉菜单分类数组
      };
      GetSearchData(params)
        .then((res) => {
        //   console.log(res);
          this.goodsList = res.data.goodsList;
          this.filterCategory = res.data.filterCategory;
          // 将filterCategory 这个数组中的所有name 替换成text, 将id 换成value属性,利用字符串的replace方法
        this.filterCategory = JSON.parse(
          JSON.stringify(this.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
      });
    },
    //点击触发
    onSearch() {
      this.getData();
      // console.log(11);
    },
    //取消触发
    onCancel() {
      this.$router.go(-1);
    },
    changePriceFn(m) {
      // 切换价格排序触发的事件
      console.log(m);
      this.order = m;
      this.sort = "price";
      // 修改完参数,重新获取数据
      this.getData();
    },
    changeKindFn(m) {
      // 切换类别触发的事件
      this.categoryId = m;
      this.sort = "id";
      // g根据修改完的参数,重新获取数据
      this.getData();
    },
  },
};
</script>
<style scoped>
</style>